import Taro, { Component, PageConfig } from "@tarojs/taro";
import PageView from "../../../components/PageView/PageView";
// import { getDetail } from "../../../service";
import { Navigator, Text, View } from "@tarojs/components";
import SwiperCover from "../../../components/SwiperCover/SwiperCover";
import { AtAvatar, AtIcon, AtRate, AtTag } from "taro-ui";

interface IState {
    book: IModel.Book,
    init: boolean;
    error?: API.Error;
    loading: boolean;
    comments: {
        id: string;
        avatar: string;
        name: string;
        comment: string;
    }[]
}

class PageDetail extends Component<{}, IState> {
    config: PageConfig = {
        navigationBarTitleText: '书籍详情'
    };

    state = {
        loading: true,
        init: false,
    } as IState;

    componentDidMount(): void {
        this.getData();
    }

    getData = async () => {
        try {
            // const res = await getDetail();
            const res = await {
                "code": 200,
                "status": "success",
                "data": {
                    "book": {
                        "id": "150000200707195112",
                        "cover": "https://user-gold-cdn.xitu.io/2018/12/24/167df457c3d66fbd",
                        "title": "意条结节党",
                        "desc": "白特导导造先变太又格那段。调究约为则上收于始完议心积音程热。在用律石存确和规色切体求织山治属。前直也量加细相生体队收下完地。",
                        "user": "侯艳",
                        "price": 79.3,
                        "read_count": 6543,
                        "tags": ["体一整", "着次"],
                        "grade": 3.7
                    },
                    "comment_list": [{
                        "id": "130000200703186135",
                        "avatar": "https://user-gold-cdn.xitu.io/2018/12/24/167df457c3d66fbd",
                        "name": "阎超",
                        "comment": "或产加内了史即记温因确两理共。处革格满起积质他清包群南积生。结程位表机照感形后商劳离法全压极理。管来今按权转制样那接期声正间表器变。价报用者是除很本边新派产性相志革定。"
                    }, {
                        "id": "460000200212140147",
                        "avatar": "https://user-gold-cdn.xitu.io/2018/11/12/16706202cc6428df?imageslim",
                        "name": "林秀英",
                        "comment": "片产二件造技属与市构连下备县清目花响。飞叫做人任状外劳维县列复管直。专叫低解生管元至队广却意石。便育群阶重结目强是感果强化提。来状般位子性县起东五特花反际毛。"
                    }, {
                        "id": "430000197906284567",
                        "avatar": "https://user-gold-cdn.xitu.io/2018/12/4/16779ed4b21a9fa5",
                        "name": "夏杰",
                        "comment": "人战约置那革记太确历两众严。文今论准海指小拉记于石可至运线包。部必备节车外政因日几会路重。写那争身组精角高布事第大制持持。被米群度程维几任太身十组了称派马。支关称据当真队层更族总并同共。"
                    }, {
                        "id": "220000198911145057",
                        "avatar": "https://user-gold-cdn.xitu.io/2018/4/9/162a9c24e48d274b",
                        "name": "贾超",
                        "comment": "但铁置该完名中酸示就学道。务很青连再出象事数政长离。流要么报其图很过集化论转海光了着好。叫通准使花道变那都理切由写。总转示史之条学认基目共图义。"
                    }, {
                        "id": "120000198001131904",
                        "avatar": "https://user-gold-cdn.xitu.io/2018/4/9/162a9c24e48d274b",
                        "name": "江秀兰",
                        "comment": "小矿只给原在中别表适层厂。因参圆口总采如年历带格它马流观生。万节广再东合极离子参志三以知。史青造从油月金干构书身十开通般查术。"
                    }, {
                        "id": "340000198811229613",
                        "avatar": "https://user-gold-cdn.xitu.io/2018/6/26/1643b682a5be1090?imageslim",
                        "name": "罗涛",
                        "comment": "记书其石入儿象问事统革成业属。系成所决任龙光道百当思个革就可关。可也飞进全为该算是现节到世养器。"
                    }, {
                        "id": "530000197607082125",
                        "avatar": "https://user-gold-cdn.xitu.io/2018/10/29/166bdaf831fa3cce",
                        "name": "方丽",
                        "comment": "下即劳切复五机应什关但义加。或单那口斗声历眼开文流量管物速造。治增然图可接能方便之克约相性强生。图合积直书很候须确度行品别便般。前济空龙基头例新具么几从按大。"
                    }, {
                        "id": "370000198511233579",
                        "avatar": "https://user-gold-cdn.xitu.io/2018/11/12/16706202cc6428df?imageslim",
                        "name": "蒋敏",
                        "comment": "极则商造已布标动何争思争组们算权。由几为业两形族志业好发利族线还着。程少两持南深利情号命极存实况华放。"
                    }, {
                        "id": "630000199310150273",
                        "avatar": "https://user-gold-cdn.xitu.io/2018/9/11/165c7a188e490e48",
                        "name": "何超",
                        "comment": "大等义办写备细团生术命商连力支。属时给养从想决最了法阶需资风整观长正。住任除放究因土使率把头带性由历这整此。"
                    }, {
                        "id": "540000197007025815",
                        "avatar": "https://user-gold-cdn.xitu.io/2018/11/12/16706202cc6428df?imageslim",
                        "name": "李平",
                        "comment": "因却今力们都放全然包各元位青出。机从教龙市重基民常规二边相主。此清活始联格党农主验片有级元会消认队。所小加象上得出口应千道管强代先。"
                    }, {
                        "id": "540000200903065131",
                        "avatar": "https://user-gold-cdn.xitu.io/2018/12/24/167df457c3d66fbd",
                        "name": "毛艳",
                        "comment": "历每老片用内我技加法直水建备世存米。收热革习转前矿观表南素这研积与。目对油号往需住解学机这结在。切题主响况究么他千还最片养事。技的线点报入支求其消角土此增程件。争再现于明长上反去报采等。北收飞成身收现力清温业林论节。"
                    }, {
                        "id": "370000197406255771",
                        "avatar": "https://user-gold-cdn.xitu.io/2018/12/24/167df457c3d66fbd",
                        "name": "方刚",
                        "comment": "化规达向适命油采复题联备革无交质路。低位来备才天万别九并亲建备干入图。叫声边三接气家阶容时开任总第。"
                    }, {
                        "id": "500000198709286240",
                        "avatar": "https://user-gold-cdn.xitu.io/2018/12/24/167df457c3d66fbd",
                        "name": "康霞",
                        "comment": "总内种志量用目水特与长石象品则育易所。看处线人道须会当共直定总众器什当。据光九始需权克压议省定分图里须候专对。权始时难点国目们江单者切正严新在线。外入与京被力改约提满天听地时他。于么完干今习满角江高毛住由现。"
                    }, {
                        "id": "320000200602171845",
                        "avatar": "https://user-gold-cdn.xitu.io/2018/12/25/167e14942f2dcf44",
                        "name": "冯秀英",
                        "comment": "单据院下般法表导那拉展几议低两。干间连始资安增拉西和始指习几。油取听形他存须行强都科江就学区。调见织开物解造府在千先但四易层量那。实技片片必局加很完是断明共济。验却容及团以一就四响记争片研能。"
                    }, {
                        "id": "44000020001106237X",
                        "avatar": "https://user-gold-cdn.xitu.io/2018/10/29/166bdaf831fa3cce",
                        "name": "邱平",
                        "comment": "认照算其专书离列很三教和能转达路列。已变不反压越准容去低处传争力厂任确。主段种真复持还圆表其然走美影省。打还设而号列完整队后还规斯压她们。"
                    }, {
                        "id": "440000200206213545",
                        "avatar": "https://user-gold-cdn.xitu.io/2018/9/11/165c7a188e490e48",
                        "name": "韩艳",
                        "comment": "生万定么又过年将对阶千利例。交论什存教第信住型好选来花路历转从。必共建法然调不林低公示至打响则。变做器给小今西县象易便采拉低位群。军去况华酸必着七又总称分展满。合直西传开九省定前采所导必。"
                    }, {
                        "id": "710000198204301715",
                        "avatar": "https://user-gold-cdn.xitu.io/2018/9/11/165c7a188e490e48",
                        "name": "汪杰",
                        "comment": "习说细分据反程十样南界主万特才情起。提林命受集世能名做用影路住。江许除头党观将表给争性以见世而入领。阶放得强都指及值着见存正又越劳工离。府成或组院广话两真活写拉产低所油。"
                    }, {
                        "id": "520000197304267892",
                        "avatar": "https://user-gold-cdn.xitu.io/2018/12/25/167e14942f2dcf44",
                        "name": "郭军",
                        "comment": "越类织什气较于最政很门别人比。前技此感现团去采程低通者例。传没团义设说身般叫省他政要所我边但。争区维始边七个角记程战流成根品因。工品五过达管条件党名感种单争段。"
                    }, {
                        "id": "130000197210105523",
                        "avatar": "https://user-gold-cdn.xitu.io/2018/12/25/167e14942f2dcf44",
                        "name": "贾强",
                        "comment": "量展织前立据别导消完个层包加飞角。件品现论当角立日影时集极动形。术五便资完农化题律品装小近收员。该取参向还通分派信收示政立而。"
                    }, {
                        "id": "15000020040419186X",
                        "avatar": "https://user-gold-cdn.xitu.io/2018/10/29/166bdaf831fa3cce",
                        "name": "龚秀英",
                        "comment": "研群线所式好务适得类斯队物布构问。全收电还如接历打百向维报它社样天人。第正使切置指资许京政难个约是。例完红张影物约空马在入南米。与每酸音形一性速圆看许研带一段红。"
                    }, {
                        "id": "810000199102252762",
                        "avatar": "https://user-gold-cdn.xitu.io/2018/9/11/165c7a188e490e48",
                        "name": "毛霞",
                        "comment": "复求全计出传才阶大约光队百住示。场者科处入商必运现研青治眼。他江明率组运文列元队基命酸都边。在院角料少深效想直者线多教。人不的造安候千光花方高率代员才。具派没此际等九斯议状备么。"
                    }, {
                        "id": "450000197606173877",
                        "avatar": "https://user-gold-cdn.xitu.io/2018/9/11/165c7a188e490e48",
                        "name": "丁伟",
                        "comment": "其及基位五林无科离不法各传海属。越委低却带种海月们历生它音压民值。点六头取口相动包火第利角合又你省按学。率平多就变品会毛想得约太门。"
                    }, {
                        "id": "810000198406107586",
                        "avatar": "https://user-gold-cdn.xitu.io/2018/11/12/16706202cc6428df?imageslim",
                        "name": "丁艳",
                        "comment": "就实则育没太龙用大放影劳百老备等。质己为斗高就总他温他看八天值除。理理何团想市最些形学也场几步。"
                    }, {
                        "id": "540000199005228204",
                        "avatar": "https://user-gold-cdn.xitu.io/2018/4/9/162a9c24e48d274b",
                        "name": "彭平",
                        "comment": "响千龙它划易作十一总车口如料。行主条大时积地共步者青单。飞难也走求管通事次除自问越证。没劳确现教提系后器院展器半。"
                    }, {
                        "id": "460000197303296230",
                        "avatar": "https://user-gold-cdn.xitu.io/2018/5/17/1636d772f3d23cf1",
                        "name": "余秀兰",
                        "comment": "真回易造深证深民政往八强关或别。或或了业全么不两理始规许报选影。成还及号深联无太又类总明识年才。查难论七队院更切高总这不广好。市身才律员油合住导如军所。济高江消形华间研知她县所外象格个部无。市构或七求打公红第开过温龙素。"
                    }, {
                        "id": "710000198804097404",
                        "avatar": "https://user-gold-cdn.xitu.io/2018/9/11/165c7a188e490e48",
                        "name": "杜刚",
                        "comment": "活快看圆较却易劳起确部照。到然美只阶间段格县头件音这验。石东群却市却石温同象月效林过么安经。复政它照老带阶切定线此确。"
                    }, {
                        "id": "220000200801065611",
                        "avatar": "https://user-gold-cdn.xitu.io/2018/5/17/1636d772f3d23cf1",
                        "name": "吕军",
                        "comment": "收状府南除标龙将行型转设族。回标率列政红叫变决角战则完候导料。细同口花两可动传该须就细然。为养价照治点如几身人历图直离书有水。"
                    }, {
                        "id": "610000201809174166",
                        "avatar": "https://user-gold-cdn.xitu.io/2018/4/9/162a9c24e48d274b",
                        "name": "董芳",
                        "comment": "千感造群空而很许般而容们却。水接圆们即由战了白老再难消放法代说。过次业单说民此战亲列调于目度着目儿中。角少议引根己每该府是声等系。"
                    }, {
                        "id": "130000198802152811",
                        "avatar": "https://user-gold-cdn.xitu.io/2018/10/29/166bdaf831fa3cce",
                        "name": "张涛",
                        "comment": "各保政己实精员当完号造分强果西业。时相群空真律务指实相图写计阶。合为是候说时易成指口九会做团称层将。完强场大性即研数较从而维王。问始存现总争开没听格育且。四后效我式了义员特状会说部代复加。"
                    }, {
                        "id": "120000199407085105",
                        "avatar": "https://user-gold-cdn.xitu.io/2018/4/9/162a9c24e48d274b",
                        "name": "崔超",
                        "comment": "影造次前统劳队老划市难日表。它任少国步话活于正热员出。效十集行集活维办级究须出法空动。几工委值能风道车达在照活基。段南头严线次光斯里断布多识积至光场。"
                    }]
                }
            };
            this.setState({
                init: true,
                book: res.data.book,
                loading: false,
                comments: res.data.comment_list
            })
        } catch (e) {
            this.setState({
                error: e,
                loading: false,
            })
        }
    };

    onReload = () => {
        this.setState({
            loading: true
        }, () => {
            this.getData();
        })
    };

    render() {
        const {book, init, loading, comments} = this.state;
        console.log(this.state);
        this.state.init = true;
        this.state.loading = false;
        return <PageView
            init={init}
            loading={loading}
            onReload={this.onReload.bind(this)}>
            <View className='page details-page'>
                <View className='flex-column flex-c-c page-pd'>
                    <SwiperCover borderRadius={10} width={250} shadow={true} ratio={1}
                                 image={book.cover}/>
                    <View className='mt-10'>
                        <Text className='text-17 bold text-default'>《{book.title}》</Text>
                    </View>
                    <View className='text-13 text-desc mt-5'>
                        <Text>{book.user}</Text>
                        <Text className='ml-10 mr-10'/>
                        <Text>{book.user}人在读</Text>
                    </View>
                    <View className='mt-10 yd-tags'>
                        {book.tags.map((tag, index) => {
                            return <AtTag key={index} size='small' className='yd-tag'>{tag}</AtTag>
                        })}

                    </View>
                    <View className='mt-10 flex-c-c'>
                        <AtRate value={book.grade} size={15}/>
                        <Text className='text-15 bold text-default ml-15'>{book.grade}</Text>
                    </View>
                </View>
                <View className='page-pd mt-15'>
                    <View className='text-20 bold text-default'>
                        <Text>书籍简介</Text>
                    </View>
                    <View className='text-13 text-default mt-10'>
                        <Text>{book.desc}</Text>
                    </View>
                </View>
                <View className='page-pd mt-15'>
                    <View className='text-20 text-default flex-c-sb'>
                        <Text className='bold'>用户评分{book.grade}</Text>
                        <View className='text-13 text-desc flex-c-c'>
                            <Text className='mr-5'>查看更多</Text>
                            <AtIcon prefixClass='icon' value='right' size={12}/>
                        </View>
                    </View>
                    <View>
                        {comments && comments.map((comment, index) => {
                            return <View className='flex mt-15' key={index}>
                                <AtAvatar size='small' circle={true} text={'kao'} image={comment.avatar}/>
                                <View className='ml-10'>
                                    <View className='flex-column'>
                                        <Text className='text-13 text-default bold'>{comment.name}</Text>
                                        <Text
                                            className='text-13 text-desc mt-5'>{comment.comment}</Text>
                                    </View>
                                </View>
                            </View>
                        })}
                    </View>
                </View>
                <View className='details-footer-bar'>
                    <View className='add-bookmark flex-c-c'><AtIcon prefixClass='icon' value='plus'/><Text>加入书架</Text></View>
                    <Navigator url={'/pages/cart'} className='action-btn flex-c-c'>
                        <View><Text>开始听书</Text></View>
                    </Navigator>
                </View>
            </View>
        </PageView>
    }
}

export default PageDetail;
